text animation - coloring and shadowing

revision:

city nights effects

top

City Nights Effect

code: 
                <div>
                    <h3>City Nights Effect</h3>
                </div>
                <style>
                    @keyframes lights {
                        0% {color: hsl(230, 40%, 80%); text-shadow: 0 0 1em hsla(320, 100%, 50%, 0.2), 
                            0 0 0.125em hsla(320, 100%, 60%, 0.3), -1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
                        1em 0.125em 0.5em hsla(200, 100%, 60%, 0);}
                        30% {color: hsl(230, 80%, 90%); text-shadow: 0 0 1em hsla(320, 100%, 50%, 0.5),
                            0 0 0.125em hsla(320, 100%, 60%, 0.5), -0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
                        0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);}
                        40% {color: hsl(230, 100%, 95%); text-shadow: 0 0 1em hsla(320, 100%, 50%, 0.5),
                            0 0 0.125em hsla(320, 100%, 90%, 0.5), -0.25em -0.125em 0.125em hsla(40, 100%, 60%, 0.2),
                        0.25em 0.125em 0.125em hsla(200, 100%, 60%, 0.4);}
                        70% {color: hsl(230, 80%, 90%); text-shadow: 0 0 1em hsla(320, 100%, 50%, 0.5), 
                            0 0 0.125em hsla(320, 100%, 60%, 0.5), 0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
                        -0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);}
                        100% {color: hsl(230, 40%, 80%); text-shadow: 0 0 1em hsla(320, 100%, 50%, 0.2), 
                            0 0 0.125em hsla(320, 100%, 60%, 0.3),1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
                        -1em 0.125em 0.5em hsla(200, 100%, 60%, 0); }
                    }
                    h3 {margin: auto; font-size: 3.5rem; font-weight: 300; animation: lights 5s 750ms linear infinite;}
                </style>

text animation - neon

N E O N

code: 
                    <div>
                        <div class="frame">
                            <h1 class="text">
                                <span class="letter letter-1">N</span>
                                <span class="letter letter-2">E</span>
                                <span class="letter letter-3">O</span>
                                <span class="letter letter-4">N</span>
                            </h1>
                        </div>
                    </div>
                    <style>
                        .frame {width: 40vw; height: 20vw; background-color: #1b2431; font-size: 0.6vw; 
                            display: flex; flex-flow: column; justify-content: center; align-items: center;}
                        .frame .text {font-family: Helvetica, Arial, sans-serif; font-weight: 100; font-size: 7vw; 
                            letter-spacing: -0.25vw; flex-flow: row;}
                        .frame .text .letter { color: #d9fdff; text-shadow: 0 0 vw #00f0ff; display: inline-block;}
                        .frame .text .letter.letter-2 {transform: translate(-0.2vw, 1vw) rotate(10deg); 
                            -webkit-animation: flicker 2s ease-in-out infinite alternate;
                            animation: flicker 2s ease-in-out infinite alternate;}
        
                        @-webkit-keyframes flicker {
                            0% {opacity: 1; transform: translate(-0.2vw, 1vw) rotate(10deg);}
                            5% {opacity: 1; transform: translate(-0.2vw, 1vw) rotate(12deg);}
                            5.5% {opacity: 0; transform: translate(-0.2vw, 1vw) rotate(14deg);}
                            6% {opacity: 1; transform: translate(-0.2vw, 1vw) rotate(10deg);}
                            6.5% {opacity: 1; transform: translate(-0.2vw, 1vw) rotate(10deg);}
                            7% {opacity: 0; transform: translate(-0.2vw, 1vw) rotate(10deg);}
                            8% {opacity: 1; transform: translate(-0.2vw, 1vw) rotate(10deg);}
                            50% {opacity: 1;transform: translate(-0.2vw, 1vw) rotate(13deg);}
                            100% {opacity: 1; transform: translate(-0.2vw, 1vw) rotate(10deg);}
                        }
        
                        @keyframes flicker {
                            0% {opacity: 1; transform: translate(-0.5vw, 2vw) rotate(10deg);}
                            5% {opacity: 1; transform: translate(-0.5vw, 2vw) rotate(12deg);}
                            5.5% {opacity: 0; transform: translate(-0.5vw, 1vw) rotate(14deg);}
                            6% {opacity: 1; transform: translate(-0.5vw, 1vw) rotate(10deg);}
                            6.5% {opacity: 1; transform: translate(-0.5vw, 1vw) rotate(10deg);}
                            7% {opacity: 0; transform: translate(-0.5vw, 1vw) rotate(10deg);}
                            8% {opacity: 1; transform: translate(-0.5vw, 1vw) rotate(10deg);}
                            50% {opacity: 1;transform: translate(-0.5vw, 5vw) rotate(13deg);}
                            100% {opacity: 1; transform: translate(-0.5vw, 5vw) rotate(10deg);}
                        }
                    </style>